<template>
  <div class="content">
    <!-- <h1>文章管理</h1>
        <p>这里是文章管理页面的内容。</p>
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
        <h1 v-show="shouldShow">你好</h1>
        <button @click="shouldShow = !shouldShow">修改</button><br />
        用户名：<input type="text" v-model="username" placeholder="请输入用户名" @keydown.enter="haha"> -->

    <!-- 测试v-for -->
    <!-- <h5 v-for="person in persons" :key="person.id">
            姓名: {{ person.name }}, 年龄: {{ person.age }}
        </h5> -->
    <h5 v-for="p in persons" :key="p.id">{{ p.id }}--{{ p.name }}--{{ p.age }}</h5>
    <button @click="haha">测试</button>
    <He></He>
    <button @click="nihao">测试</button>
  </div>
</template>

<script>
  import He from '@/components/He.vue';
  import { addPerson } from '@/utils/student.js';
  import { nanoid } from 'nanoid';
  export default {
    name: 'Content',
    components: { He },
    data() {
      return {
        show: true,
        shouldShow: true,
        username: 'caodan',
        persons: [
          { id: nanoid(), name: '张三', age: 18 },
          { id: nanoid(), name: '李四', age: 20 },
          { id: nanoid(), name: '王五', age: 22 },
        ],
      };
    },
    methods: {
      nihao() {
        console.log('hahaha');
        console.log(window.location.host);
        console.log(window.navigator.userAgent);
        console.log(window.navigator.platform);
      },
      async haha() {
        let person = { name: '张三', age: 18 };
        let student = { uname: '李四', uage: 20 };
        let id = '001';
        Object.assign(person, { id });

        // console.log(person);
        const human = { ...person, ...student };
        // console.log(human);
        let uid = '001';
        // const human = { id: uid, ...person };

        const res = await addPerson(human);
        // console.log(res);
        console.log(human);
        // this.$bus.$emit('hehe', this.persons);
      },
    },
  };
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  input {
    margin-top: 20px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>
